<template>
    <div>
        <ul class="orderList pad40">
            <li class="orderItem pad40" v-for="(item,index) in orderListFilter" :key="index">
                <div class="orderState font30">
                    <div class="bold">{{item.shopName}}</div>
                    <div>{{item.shopName}}</div>
                </div>
                <div class="orderInfo font24">
                    <div>订单菜品：{{item.foodName}}</div>
                    <div class="font30 color33 bold">&yen;{{item.totalAmount}}</div>
                </div>
                <div class="orderInfo font24">
                    <div>下单时间：{{item.orderDt}}</div>
                </div>
                <div class="operaBtn borderT marT40 padT40">
                    <!-- <div class="btn cancelBtn">开发票</div> -->
                    <div class="btn surnBtn" @click="toAppraise(item)">评价</div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import {GetOrderByShopId} from '@/api/order'
export default {
    data(){
        return {
            orderList:[]
        }
    },
    created(){
        this.reqGetOrderByShopId()
    },
    computed:{
        orderListFilter(){
            return this.orderList.filter(function(item){
                return !item.isReview
            })
        }
    },
    methods:{
        async reqGetOrderByShopId(){
            let params = {
                shopId: this.$store.state.tableInfo.shopId
            }
            let {returnData = false} = await GetOrderByShopId(params)
            if(returnData == false) return
            this.orderList = returnData
        },
        toAppraise(item){
            this.$router.push({path:'/appraise',query:{orderId:item.orderId}})
        }
    }
}
</script>
<style lang="scss" scoped>
    .orderList{
        .orderItem{
            margin-bottom: 5.3%;
            border-radius: 0.3rem;
            background-color: #fff;
            &:last-child{ 
                margin-bottom: 0;
            }
            .orderState{
                display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; line-height: 2;
            }
            .orderInfo{
                display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; line-height: 1.5; color: #666;
            }
            .operaBtn{ display: flex; justify-content: flex-end; align-items: center; overflow: hidden; font-size: 0.7rem; background-color: #fff;
                .btn{ width: 4rem; height: 1.6rem; line-height: 1.6rem; border-radius: 0.3rem; }
                .cancelBtn{ text-align: center; color: #333; margin-right: 0.375rem; border: 1px solid #333;}
                .surnBtn{ text-align: center; color: #333; margin-left: 0.375rem; background-image: linear-gradient(to right,$mainColor,#ffae44);}
            }
        }
    }
</style>